<template>
  <div class="summary-container">
    <el-card class="box-card" shadow="never">
      <div class="info">
        <div class="left">
          <el-avatar :size="45" shape="square" :src="data.photo">
            <el-icon size="25">
              <UserFilled />
            </el-icon>
          </el-avatar>
        </div>
        <div class="right">
          <div class="base">
            <span>姓名：{{ data.name }}</span>
            <span>性别：{{ data.sex }}</span>
            <span>电话号码：{{ data.tel }}</span>
            <div class="operate" @click="updateHandle">
              <el-icon :size="18">
                <Edit />
              </el-icon>
              <div>修改资料</div>
            </div>
          </div>
          <p>注册时间：{{ data.createTime }}</p>
        </div>
      </div>
      <el-divider />
      <el-row :gutter="16">
        <el-col :span="6">
          <div class="statistic-card">
            <el-statistic :value="data.amount" suffix="元">
              <template #title>
                <div class="title">累计消费金额</div>
              </template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="statistic-card">
            <el-statistic :value="data.count" suffix="笔">
              <template #title>
                <div class="title">有效订单数量</div>
              </template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="statistic-card">
            <el-statistic :value="data.number" suffix="个">
              <template #title>
                <div class="title">体检套餐数量</div>
              </template>
            </el-statistic>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
  <el-dialog title="修改资料" :close-on-click-modal="false"
             v-model="dialog.visible" width="420px">
    <el-form :model="dialog.dataForm" ref="dialogForm"
             :rules="dialog.dataRule" label-width="60px">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="dialog.dataForm.name" placeholder="输入姓名"
                  maxlength="10" size="medium" class="input" clearable />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="dialog.dataForm.sex" placeholder="选择性别"
                   size="medium" clearable="clearable">
          <el-option label="男" value="男" />
          <el-option label="女" value="女" />
        </el-select>
      </el-form-item>
      <el-form-item label="电话" prop="tel">
        <el-input v-model="dialog.dataForm.tel" placeholder="输入电话"
                  maxlength="11" size="medium" class="input" clearable />
      </el-form-item>
    </el-form>
    <template #footer>
        <span class="dialog-footer">
            <el-button size="medium" @click="dialog.visible = false">
                取消
            </el-button>
            <el-button type="primary" size="medium" @click="dataFormSubmit">
                确定
            </el-button>
        </span>
    </template>
  </el-dialog>

</template>

<script lang="ts" setup>
import { reactive, ref, Ref, getCurrentInstance } from 'vue';
import router from '../../router/index';
const { proxy } = getCurrentInstance();

const data = reactive({
  name: null,
  sex: null,
  tel: null,
  photo: null,
  createTime: null,
  count: 0,
  number: 0,
  amount: 0
});
function loadData() {
  proxy.$http('/front/customer/searchSummary', 'GET', null, true, function (resp) {
    let result = resp.result;
    data.name = result.name == null ? '未填写' : result.name;
    data.sex = result.sex == null ? '未填写' : result.sex;
    data.tel = result.tel;
    data.photo = result.photo;
    data.createTime = result.createTime;
    data.count = result.count;
    data.number = result.number;
    data.amount = result.amount;
  });
}

loadData();

const dialog = reactive({
  visible: false,
  dataForm: {
    name: null,
    tel: null,
    sex: null
  },
  dataRule: {
    name: [{ pattern: '^[\u4e00-\u9fa5]{2,10}$', message: '姓名内容错误' }],
    tel: [
      { required: true, message: '电脑号码不能为空' },
      {
        pattern: '^1[1-9]\\d{9}$',
        message: '电话格式错误'
      }
    ]
  }
});

function updateHandle() {
  dialog.visible = true;
  proxy.$nextTick(() => {
    proxy.$refs['dialogForm'].resetFields();
    dialog.dataForm.name = (data.name == '未填写' ? null : data.name);
    dialog.dataForm.sex = (data.sex == '未填写' ? null : data.sex);
    dialog.dataForm.tel = data.tel;
  });
}
function dataFormSubmit() {
  proxy.$refs['dialogForm'].validate(valid => {
    if (valid) {
      proxy.$http('/front/customer/update', 'POST', dialog.dataForm, true, function (resp) {
        if (resp.result) {
          proxy.$message({
            message: '个人资料更新成功',
            type: 'success',
            duration: 1200,
            onClose: () => {
              dialog.visible = false;
              loadData();
            }
          });
        }
      });
    }
  });
}

</script>

<style lang="less" scoped>
@import url(mine.less);
</style>
